{extend name="layout"}
{block name="body"}


<section class="wld-content">
	<div class="page_title">公司信息</div>
	<div class="page_title_obj">
		<a class="go_back" href="{:url('index/index/index')}"><i class="iconfont iconcontract2-fill"></i>返回到控制台</a>

	</div>

	<div class="con_box layui-form">
		<form onsubmit="return false;" action="{:url('info')}" data-auto="true" method="post" class='layui-form layui-card form-perfect' autocomplete="off">

		<div class="con_title">
			<span class="con_title_line"></span>
			<span>公司信息</span>
		</div>
		<div class="change-company">


				<div class="layui-card-body">

					<div class="layui-form-item">
						<label class="layui-form-label label-required-prev">公司名称:</label>
						<div class="layui-input-block">
							<input type="text" name="name" value="{$company.name|default=''}" required placeholder="请输入公司名称" class="layui-input" >
						</div>
					</div>

					<div class="layui-form-item">
						<label class="layui-form-label label-required-prev">手机号码:</label>
						<div class="layui-input-block">
							<input type="text"  value="{$mobile|default=''}"  readonly class="layui-input mobile" >
							<a class="change-mobile"  onclick="changeMobile(this)">更换</a>

						</div>
					</div>

					<div class="layui-form-item">
						<label class="layui-form-label label-required-prev">联系地址:</label>
						<div class="layui-input-block textarea-box" >
							<textarea class="layui-textarea" required  name="company_add" placeholder="请填写联系地址">{$company.company_add|default=""}</textarea>
						</div>
					</div>
					<div class="layui-form-item company-img" >
						<label class="layui-form-label label-required-prev">营业执照:</label>
						<span class="company-text">要求清晰、无遮挡，10M以内，支持PNG、JPG、JPEG格式</span>
						<div class="layui-input-block">
							<div>
								<a  onclick="$(this).next('input').click()">

									<img src="{$company.business_license|default='__ROOT__/static/index/img/company-icon.png'}"  class="company-img" />
								</a>

								<input type="file" style="display: none" onchange="uploadImg(this)"
									   value="" >
								<input type="hidden" name="business_license" value="{$company.business_license|default=''}">

							</div>
						</div>
					</div>



				</div>


		</div>
		<div class="con_title">
			<span class="con_title_line"></span>
			<span>发票信息</span>
		</div>
			<div class="change-bill">


				<div class="layui-card-body">

					<div class="layui-form-item">
						<label class="layui-form-label label-required-prev">税务身份:</label>
						<div class="layui-input-block">
							<select name="taxid" class="layui-select" required>
								{foreach $taxid as $k=>$v}
				                {if (isset($company.taxid) and $company.taxid eq $k)}
				                <option selected value="{$k}">{$v}</option>
				                {else}
				                <option value="{$k}">{$v}</option>
				                {/if}
				                {/foreach}

							</select>
						</div>
					</div>


					<div class="layui-form-item">
						<label class="layui-form-label label-required-prev">发票类型:</label>
						<div class="layui-input-block">
							<select  name="invoice" class="layui-select" lay-filter="company-special" required>
								{foreach $invoice as $k=>$v}
				                {if (isset($company.invoice) and $company.invoice eq $k)}
				                <option selected value="{$k}">{$v}</option>
				                {else}
				                <option value="{$k}">{$v}</option>
				                {/if}
				                {/foreach}
							</select>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label label-required-prev">公司税号:</label>
						<div class="layui-input-block">
							<input type="text" name="tax_number" value="{$company.tax_number|default=''}" required placeholder="请输入公司税号" class="layui-input" >
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label label-required-prev">电子邮箱:</label>
						<div class="layui-input-block">
							<input type="text" name="email" value="{$company.email|default=''}" required placeholder="请输入电子邮箱" class="layui-input" >
						</div>
					</div>
					<div class="company-special-box" {if (isset($company.invoice) and $company.invoice eq 1)}style="display: block;"{else/}style="display: none"{/if}>
						<div class="layui-form-item">
							<label class="layui-form-label label-required-prev">公司地址:</label>
							<div class="layui-input-block textarea-box" >
								<textarea class="layui-textarea" required  name="invoice_add" placeholder="请填写公司地址">{$company.invoice_add|default=""}</textarea>
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label label-required-prev">公司电话:</label>
							<div class="layui-input-block">
								<input type="text" name="company_tel" value="{$company.company_tel|default=''}" required placeholder="请输入公司电话" class="layui-input" >
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label label-required-prev">银行账户:</label>
							<div class="layui-input-block">
								<input type="text" name="bank_account" value="{$company.bank_account|default=''}" required placeholder="请输入银行账户" class="layui-input" >
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label label-required-prev">开户银行:</label>
							<div class="layui-input-block">
								<input type="text" name="bank" value="{$company.bank|default=''}" required placeholder="请输入开户银行" class="layui-input" >
							</div>
						</div>
					</div>


				</div>


			</div>

				<button class="layui-btn btn-save" type='submit' onclick="submitPerfect()">保存</button>


		</form>


	</div>
	<div id="mobile-box" style="display: none">

		<form onsubmit="return false;" action="{:url('index/index/change_mobile')}" data-auto="true" method="post" class='layui-form layui-card' autocomplete="off" data-callback="submitMobileCallback">

		<div class="mobile-box-form">

			<div class="layui-card-body">


				<div class="layui-form-item">
					<label class="layui-form-label label-required-prev">手机号码:</label>
					<div class="layui-input-block">
						<input type="text" name="mobile" value="" id="phone"  placeholder="请输入新手机号" class="layui-input" >

					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label label-required-prev">验证码:</label>
					<div class="layui-input-block">
						<input type="text" name="verify" value="" required placeholder="请输入验证码"  class="layui-input verify" >
						<a class="get-code-btn" >获取</a>

					</div>
				</div>




			</div>

		</div>
			<div style="display: flex;align-items: center;justify-content: center">
				<button class="layui-btn" type='submit' >确定</button>
			</div>


		</form>

	</div>
</section>

{/block}
{block name="script"}

<script>
	$(function (){
		form.render()
		form.on('select(company-special)', function(data){

			console.log(data.value)
			var _id = data.value
			var $box=$(".company-special-box")

			if(_id=="1"){

				$box.find("input").attr("required","required")
				$box.find("textarea").attr("required","required")


				$box.show(500)

			}else{
				$box.find("input").removeAttr("required")
				$box.find("textarea").removeAttr("required")
				$box.hide(500)

			}
			form.render()

		})

		//获取验证码
		timer="";
		nums = 60;
		phoneFlag = true;
		$(".get-code-btn").on("click",function(){
			if(phoneFlag){
				var that = this
				//检测手机号码
				var isCheck = checkPhone("phone")
				if(!isCheck){
					return false
				}

				phoneFlag=false;


				$.ajax({
					url: '{:url("index/login/send_sms")}',
					data: {
						"mobile":$("input[name='mobile']").val(),
						"type":1,
						"verify_type":4
					},
					type: "post",
					success: function(res) {
						if(res.code == 1) {
							layer.msg("验证码发送成功，请等待~")
							// $.msg.alert("验证码发送成功，请等待~")

							// 验证码倒计时
							var code=$(that);
							timer=setInterval(function(){
								if(nums>0){
									nums--;
									code.html(nums+" 秒");
									// code.addClass("gray-bg");
								}
								else{
									clearInterval(timer);
									nums=60;//重置回去
									phoneFlag = true
									code.html("获取");
								}
							},1000)

						} else {
							phoneFlag = true
							layer.msg(res.info)
						}
					},
					error: function() {
						layer.msg("发送失败");
					}
				});


			}

		});
	})

	function submitMobileCallback(res) {

		if(res.code==1){
			layer.msg(res.info);
			$(".mobile").val(res.data.mobile)
			// $(".mobile").next('a').attr("data-mobile",res.data.mobile)
			setTimeout(function (){
				layer.closeAll()

			},500)

		}else{
			layer.msg(res.info);
		}
	}
	var uploadImg = function (obj){


		var $this = $(obj)

		var filePath = $this[0].files[0].name      //获取到input的value，里面是文件的路径
		var fileFormat = filePath.split('.')[1].toLowerCase()
		// 检查是否是图片
		if( !fileFormat.match(/png|jpg|jpeg/) ) {
			layer.msg('上传错误,文件格式必须为：png/jpg/jpeg');

			return
		}
		var formData =  new FormData();
		formData.append('image', $this[0].files[0]); //添加图片信息的参数
		$.ajax({
			url: '{:url("index/index/upload")}',
			type: "post",
			dataType: "json",
			cache: false,
			mimeType: "multipart/form-data",
			data: formData,
			processData: false,// 不处理数据
			contentType: false, // 不设置内容类型
			async:false,
			success:function (res){
				console.log(res)
				if(res.code==1){
					layer.msg(res.info);
					$this.next('input').val(res.data.business_license)
					$this.prev('a').children('img').attr('src', res.data.url)

				}else{
					layer.msg(res.info);
				}

			},
			fail:function (){
				layer.msg("上传失败！");
			}
		});



	}
	var changeMobile = function (obj){
		$("#mobile-box form")[0].reset()
		var $this = $(obj)
		// var mobile = $this.attr("data-mobile")
		// console.log(mobile)
		// $("#mobile-box input[name='mobile']").val(mobile)
		var index = layer.open({
			type: 1,
			title: "更改手机号",//数组第二项可以写任意css样式；如果你不想显示标题栏，你可以title: false
			area: '420px',
			content: $('#mobile-box'),
			closeBtn: 1,

		});


	}
	var submitPerfect = function (){
		event.preventDefault();
		var business_license = $("[name='business_license']").val()
		if(!business_license){
			layer.msg("请上传营业执照！");
			return false
		}
		$('.form-perfect').submit()

	}


</script>
{/block}
{block name="style"}
<!--<link rel="stylesheet" href="__ROOT__/static/index/css/test.css?at={:date('md')}">-->
<style>
	.change-company {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.change-company textarea {
		width: 320px;
		line-height: normal;
	}
	.change-company input {
		height: 32px;
		line-height: 32px;
		width: 320px;
	}
	.change-company input.mobile.layui-input {
		width: 190px;
		background: #F7F7FA;
		border: 1px solid #E5E5ED;
		border-radius: 5px;
		display: inline-block;
	}
	.change-company .change-mobile {
		font-size: 14px;
		color: #61CAD7;
		padding-left: 25px;
	}
	.change-company .company-img .company-text {
		line-height: 32px;
	}
	.change-company .company-img img {
		width: 280px;
		height: 160px;
		border-radius: 5px;
		margin-top: 15px;
	}
	.change-bill {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.change-bill textarea {
		width: 320px;
		line-height: normal;
	}
	.change-bill input,
	.change-bill select {
		height: 32px;
		line-height: 32px;
		width: 320px;
		color: #2C2C2C;
	}
	.change-bill .layui-unselect.layui-form-select {
		width: 320px;
	}
	.btn-save {
		width: 320px;
		margin-left: calc(50% - 160px);
		margin-bottom: 50px;
	}
	/*placeholder*/
	/* Chrome */
	::-webkit-input-placeholder {
		color: #CDCDD6;
	}
	/* IE 10+ */
	:-ms-input-placeholder {
		color: #CDCDD6;
	}
	/* Firefox 4-18 */
	/* Firefox 19+ */
	:-moz-placeholder,
	::-moz-placeholder {
		color: #CDCDD6;
		opacity: 1;
	}
	.layui-layer-content {
		border-radius: 10px;
	}
	/*#mobile-box p {*/
	/*	font-size: 20px;*/
	/*	color: #2C2C2C;*/
	/*	margin-top: 30px;*/
	/*	margin-bottom: 20px;*/
	/*	text-align: center;*/
	/*}*/
	#mobile-box .mobile-box-form {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 30px;
	}
	#mobile-box .mobile-box-form input {
		height: 32px;
		line-height: 32px;
		width: 200px;
	}
	#mobile-box .mobile-box-form input.verify.layui-input {
		width: 135px;
		border-radius: 5px;
		display: inline-block;
	}
	#mobile-box .mobile-box-form .get-code-btn {
		display: inline-block;
		width: 60px;
		height: 32px;
		background: #61CAD7;
		border-radius: 5px;
		text-align: center;
		line-height: 32px;
		margin-left: 5px;
		color: #ffffff;
		font-size: 14px;
	}
	#mobile-box button {
		width: 200px;
		height: 32px;
		background: #61CAD7;
		border-radius: 5px;
		margin-left: 95px;
		margin-bottom: 35px;
	}
	body .layui-layer .layui-layer-setwin{
		display: block;
	}
	.layui-layer-setwin a{
		height: 70px;
	}
	.textarea-box span{
		top: 105px !important;
	}

</style>
{/block}


